<template>
  <div>
    <div class="title">
      <div>报警记录</div>
      <div>
        <el-date-picker
          is-range
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <!-- <el-date-picker
          is-range
          range-separator="~"
          start-placeholder="开始时间"
          end-placeholder="截止时间"
          value-format="YYYY-MM-DD"
        /> -->
      </div>
    </div>

    <div
      class="chart-container"
      ref="chartContainer"
      style="width: 100%; height: 250px"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ElDatePicker } from "element-plus";

const chartContainer = ref<HTMLElement | null>(null);
const selectedDateRange = ref<string | null[]>(null);

onMounted(() => {
  renderChart();
});

onBeforeUnmount(() => {
  // 在组件销毁前销毁图表实例，防止内存泄漏
  echarts.dispose(chartContainer.value);
});

const handleDateChange = () => {
  renderChart();
};

const renderChart = () => {
  // 模拟根据选择的时间范围获取数据，这里需要根据实际情况替换为真实的数据请求逻辑
  const data = generateMockData();

  // 初始化图表
  const chart = echarts.init(chartContainer.value);

  // 图表配置
  const options = {
    title: {
      text: "",
      left: "center",
    },
    xAxis: {
      type: "category",
      data: ["区域入侵", "软包未装框", "行李掉落", "行李滞留", "其他"],
    },
    yAxis: {
      type: "value",
      name: "",
    },
    series: [
      {
        name: "柱状图",
        type: "bar",
        barWidth: 30, // 调整柱状图的宽度
        itemStyle: {
          color: function (params) {
            // 设置不同柱状图的颜色，可以根据实际需求进行调整
            const colors = [
              "#FF5252",
              "#FFB74D",
              "#FFEB3B",
              "#CDDC39",
              "#4CAF50",
            ];
            return colors[params.dataIndex];
          },
        },
        data: data,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  chart.setOption(options);

  // 当窗口大小发生变化时，图表自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

const generateMockData = () => {
  // 模拟数据生成函数，根据选择的时间范围生成相应的数据
  // 这里使用随机数来模拟
  const data = [];
  for (let i = 0; i < 5; i++) {
    data.push(Math.floor(Math.random() * 100));
  }
  return data;
};
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 40px;
}

.chart-container {
  margin-top: 20px;
}
</style>
